<template>
	<view class="recharge">
		<view class="list dFlex jBetween_aCenter fWap">
			<view @click="selId = item.id" :class="['quan',selId == item.id?'active':'']" v-for="(item,index) in list" :key='index'>
				<view class="showPrice dFlex jBetween_aCenter">
					<view>支付￥<text>{{item.amount}}</text></view>
					<!-- <view style="text-decoration: line-through;">充值:￥<text>{{item.gold}}</text>元</view> -->
				</view>
				<view class="count dFlex jCenter_aEnd">
					<text>获得:</text>
					<view> {{item.gold}} </view>
					<text>元</text>
				</view>
			</view>
		</view>
		<view class="seat"></view>
		<view class="btns">
			<view class="btn" @tap='recharge'>
				现在充值
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selId:'',
				list:[],
			};
		},
		onShow(){
			this.initPriceList();
		},
		methods:{
			initPriceList(){
				this.tool.getData('User/rechargePrice',{
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):'',
				}).then(res=>{
					console.log(res);
					if(res){
						this.list = res;
						this.selId = res[0].id;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			recharge(){
				if(this.selId){
					this.tool.getData('User/rechargePay',{
						id:this.selId,
						memberId:uni.getStorageSync('userId'),
					}).then(res=>{
						console.log(res);
						if(res){
							uni.requestPayment({
								provider:'wxpay',
								timeStamp:res.weixin.timeStamp,
								nonceStr:res.weixin.nonceStr,
								package:res.weixin.package,
								signType:res.weixin.signType,
								paySign:res.weixin.paySign,
								success: () => {
									uni.showToast({
										title:'充值成功',
										icon:"success"
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1650)
								},
								fail:(err)=>{
									console.log(err);
									uni.showToast({
										title:'订单支付失败',
										icon:"none"
									})
								}
							})
						}
					}).catch(err=>{
						console.log(err);
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
	}
	.recharge{
		width:100%;
		padding: 12px;
		box-sizing: border-box;
		.list{
			width: 100%;
			.quan{
				width:48%;
				padding: 12px;
				box-sizing: border-box;
				background:white;
				border-radius: 6px;
				box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
				margin-bottom: 16px;
				.count{
					width: 100%;
					padding-top: 8px;
					text{
						font-size: 14px;
						color: #7a7a7a;
					}
					view{
						font-size: 20px;
						font-weight: bold;
						padding: 0 4px;
						color: #1664FF;
					}
				}
				.showPrice{
					width: 100%;
					padding-bottom: 8px;
					border-bottom: 1px solid #999999;
					font-size:12px;
					text{
						font-size: 14px;
						font-weight: bold;
						color: #7a7a7a;
					}
				}
			}
			.active{
				background: #1664FF;
				color: white;
				.count{
					color: white;
					text{
						color: white;
					}
					view{
						color: white;
					}
				}
				.showPrice{
					border-color: white;
					text{
						color: white;
					}
				}
			}
		}
		.btns {
			padding: 40rpx 46rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			.btn {
				width: 100%;
				background: linear-gradient(0deg, #609ff8 0%, #1664ff 100%);
				text-align: center;
				display: block;
				padding: 24rpx 0;
				font-size: 13px;
				color: white;
				border-radius: 80rpx;
			}
		}
	}
</style>
